<template>
	<div>
		<u-popup safe-area-inset-bottom v-model="show" mode="left">
			<view style="">
				<customNavbar title="选择产品" @back="show = false" rightText="确定" @clickRight="navbarClickRight">
				</customNavbar>
			</view>
			<!-- 搜索区域 -->
			<div style="position: fixed;width: 99%;background-color: #fff;z-index: 999;">
				<div style="margin-top: 10px;">
					<uni-search-bar style="color:#fff" :textColor="'#ccc'" @confirm="search"
						v-model="queryParam.Keyword" @clear="clear" placeholder="请输入产品名称"
						@cancel="clear"></uni-search-bar>
				</div>
			</div>

			<!-- 列表区域 -->
			<div class="outerBox" style="width:300px;">
				<scroll-view style="width: 100%;height: 100%;padding-top: 60px;" scroll-y="true" @scrolltolower="lower">
					<view class="ckbxcli" style="padding-left: 20rpx;padding-right: 20rpx;"
						v-for="(item, index) in data" :key="index">
						<view @click="customerChoice(item, index)" style="position: absolute;width: 86%;">
							<view
								style="display: flex;justify-content: space-between;border-bottom:1px solid Gainsboro;padding: 20rpx 0;">
								<view>{{item.cInvName}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;padding: 20rpx 0;">
								<span>编码</span>
								<span>{{item.cInvCode}}</span>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;padding-top: 20rpx;">
							<u-checkbox @change="checkboxChange($event, item,index)" v-model="item.checked"
								:name="item.cInvCName" :size="45"></u-checkbox>
						</view>
					</view>

					<div style="padding-bottom: 20px;">
						<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
					</div>


					<view v-if=" isSearchProduct" class="search-none">
						<image src="../assets/search.png" alt="" style="width: 100rpx;height:100rpx">
							<h4 style="color:#6C6C6C;margin-top:5px">产品检索</h4>
					</view>
				</scroll-view>
			</div>
		</u-popup>
	</div>
</template>

<script>
	// import PaginationCom from "@/components/PaginationCom.vue";
	import {
		ProductManagementInventoryGetDataList
	} from '@/api/interface.js'
	export default {
		components: {},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				isSearchProduct: false,
				Prceid: "",
				prd: {},
				pageNo: 1,
				PageRows: 10,
				prdlist: [],
				loading: false,
				finished: false,
				pagination: {
					current: 1,
					pageSize: 10,
				},
				Total: 0,
				// 选中的产品列表
				selectedRowKeys: [],
				queryParam: {
					Condition: "cInvName",
					Keyword: ""
				},
				entity: {},
				judgment: true,
				data: [],
				show: false,
				Id: ""
			};
		},
		created() {
			// 初始默认检索提示
			this.isSearchProduct = true
		},
		methods: {
			// 触底
			lower(e) {
				if (this.data.length >= this.pagination.Total) return
				// 上拉加载
				this.pagination.current++;
				this.getDataList()
			},
			// 顶部导航栏右侧按钮确定
			navbarClickRight() {
				console.log('确定了', this.entity)
				this.$emit('Product', this.data)
				this.show = false
			},
			checkboxChange(event, item, index) {
				this.$forceUpdate()
			},
			paginationchange(a, b) {
				this.pagination.current = a;
				this.getDataList();
			},
			//返回
			onClickLeft() {
				// 数据重置
				this.data = []
				this.entity = {}
				this.show = false;
				// 显示检索提示
				this.isSearchProduct = true
				//返回时候清空输入框的值
				this.queryParam.Keyword = ""
			},
			clear() {
				this.queryParam = [];
				this.getDataList();
			},
			//搜索
			search() {
				this.isSearchProduct = false
				// if (this.finished) {
				this.queryParam.Condition = "cInvName";
				// this.pageNo = 1;
				// this.PageRows = 9999;
				// 获取产品列表
				this.getDataList();
				// }else{
				//   alert(this.data.length)
				//   // console.log(this.data.length );
				//   Toast('请等数据加载完后再进行查找')
				// }
			},

			customerChoice(item, index) {
				this.$set(item, "checked", !item.checked);
			},
			//选中后确定按钮
			onClickRight() {
				this.prdlist = this.data.filter(item => item.checked == true);

				this.$emit("Product", this.prdlist);
				this.show = false;
				// 重置化显示检索信息
				this.isSearchProduct = true
				this.data = []
				this.queryParam.Keyword = ""
			},
			// 获取样品产品列表数据
			getDataList() {
				this.status = "loading";
				ProductManagementInventoryGetDataList({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "Id",
						SortType: "asc",
						Search: {
							Condition: this.queryParam.Condition,
							Keyword: this.queryParam.Keyword
						}
					})
					.then(resJson => {

						// 赋值总条数
						this.Total = resJson.Total;
						if (resJson.Data.length == 0 || resJson.Data == null) {
							this.status = "noMore"
							this.loading = false;
							return
						}
						if (this.pagination.current == 1) {
							this.data = resJson.Data
						} else {
							// 有数据 赋值列表 加载状态结束
							this.data = this.data.concat(resJson.Data)
						}
						this.data.forEach(item => {
							item.checked = false
						})
						console.log('获取样品列表数据', this.data)

						// 如果list长度大于等于总数据条数，数据全部加载完成
						if (this.data.length >= resJson.Total) {
							this.status = "noMore"
							this.loading = false;
							return
						}
					});
			},
			init() {
				this.status = "noMore"
				this.show = true;
				this.prdlist = [];
			},
			openForm(RuleMainId) {
				this.init();
				// Toast.loading({
				//   duration: 0, // 持续展示 toast
				//   forbidClick: true,
				//   message: "加载中..."
				// });
				this.Prceid = RuleMainId;
				// if (RuleMainId) {
				// 	this.http
				// 		.post("/ProductManagement/Inventory/GetDataListByRuleMainId", {
				// 			PageIndex: this.pagination.current,
				// 			PageRows: this.pagination.pageSize,
				// 			SortField: "Id",
				// 			SortType: "asc",
				// 			Search: {
				// 				Condition: this.queryParam.Condition,
				// 				Keyword: this.queryParam.Keyword,
				// 				RuleMainId: RuleMainId
				// 			}
				// 		})
				// 		.then(resJson => {
				// 			this.data = resJson.Data;
				// 			this.Total = resJson.Total;
				// 			// console.log(this.List);
				// 		});
				// } else {
				// 	// this.getDataList();
				// 	// 停止加载
				// 	this.loading = false
				// }
			}
		}
	};
</script>

<style scoped>
	/* 覆盖uniapp顶部导航栏左侧文字颜色 */
	.uni-navbar>>>.uni-nav-bar-right-text {
		color: #1959FA !important;
	}

	/* 	.uni-navbar>>>.uni-icons {
		color: #1959FA !important;
	} */

	/* .uni-navbar>>>.uni-navbar-btn-text>span {
		color: #1959FA !important;
	} */

	::v-deep.u-checkbox[data-v-532d01c7] {
		display: flow-root !important
	}

	.search-none {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.checked {
		position: absolute;
		right: 10px;
		top: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10%;
	}

	.outerBox {
		/* 	height: calc(100vh - 120px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto; */
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	.nav {
		position: fixed;
		width: 100%;
	}

	.ckbxcli {
		border: 1px solid Gainsboro;
		margin: 20rpx;
		padding: 10rpx 25rpx;
		height: 100px;
		/* position: relative;
		
		width: 95%; */

		/* 	text-align: center;
		margin-left: 2%;
		margin-top: 6px;
		margin-bottom: 6px;
	
		cursor: pointer;
		
		list-style-type: none;
		display: inline-block; */
	}

	ul {
		/* margin-top: 10px; */
	}
</style>